
<template>
	<!-- 组件-教学计划表格 -->
	<div class="course-meal-dialog" ref="courseMealDialog" v-show="visible">
		<el-row class="head" title="按住鼠标可拖动窗体" @mousedown.native="headMouseDown"
		 @mousemove.native="headMouseMove" @mouseup.native="headMouseUp" @mouseout.native="headMouseOut">
			<i class="el-icon-close closebtn" @click="hidden" title="关闭"></i>
		</el-row>
		<el-tabs v-model="planObjectType">
			<el-tab-pane label="课程" name="1">
				<el-row :gutter="8">
					<el-col :span="12">
						<el-input placeholder="输入课程名搜索"></el-input>
					</el-col>
					<el-col :span="6">
						<el-button style="height: 0.4rem;">搜索</el-button>
					</el-col>
				</el-row>
				<el-row style="margin-top:0.1rem;">
					<table class="table" cellspacing="0" style="width: 100%;">
						<thead class="thead">
							<tr>
								<td style="width: 30%;">课程名称</td>
								<td style="width: 30%;">
									<el-select size="mini" v-model="selectCourse" placeholder="课程类型"></el-select>
								</td>
								<td style="width: 25%;">
									<el-select size="mini" v-model="selectAge" placeholder="适用年龄"></el-select>
								</td>
								<td style="width: 10%;">选用</td>
							</tr>
						</thead>
						<tbody class="tbody">
							<tr v-for="(item,index) in courseList" :key="index">
								<td>{{item.name}}</td>
								<td></td>
								<td></td>
								<td><el-checkbox v-model="item.checked"></el-checkbox></td>
							</tr>
						</tbody>
					</table>
				</el-row>
			</el-tab-pane>
			<el-tab-pane label="餐点" name="2">
				<el-row>
					<table class="table" cellspacing="0" style="width: 100%;">
						<thead class="thead">
							<tr>
								<td style="width: 90%;">餐费名称</td>
								<td style="width: 10%;">选用</td>
							</tr>
						</thead>
						<tbody class="tbody">
							<tr v-for="(item,index) in mealList" :key="index">
								<td>{{item.name}}</td>
								<td><el-checkbox v-model="item.checked"></el-checkbox></td>
							</tr>
						</tbody>
					</table>
				</el-row>
			</el-tab-pane>
		</el-tabs>
		<el-row class="bottom">
			<el-button @click="hidden">取消</el-button>
			<el-button @click="save">确认选择</el-button>
		</el-row>
	</div>
</template>

<script>
	export default{
		components:{},
		props:['visible'],
		data(){
			return {
				// show:this.visible,
				planObjectType:'1',
				selectCourse:'',
				selectAge:'',
				courseList:[
					{name:'课程测试1',checked:false},
					{name:'课程测试2',checked:false},
					{name:'课程测试3',checked:false},
				],
				mealList:[
					{name:'餐费测试1',checked:false},
					{name:'餐费测试2',checked:false},
					{name:'餐费测试3',checked:false},
				],
				mousedown:false,
				domPosition:{
					x:0,
					y:0,
					l:0,
					t:0
				}
			}
		},
		methods:{
			//拖动窗体
			headMouseDown(e){
				//获取x坐标和y坐标
				this.domPosition.x = e.clientX;
				this.domPosition.y = e.clientY;

				//获取左部和顶部的偏移量
				this.domPosition.l = this.$refs['courseMealDialog'].offsetLeft;
				this.domPosition.t = this.$refs['courseMealDialog'].offsetTop;
				//开关打开
				this.mousedown = true;
				//设置样式  
				this.$refs['courseMealDialog'].style.cursor = 'move';
			},
			headMouseMove(e){
				if (this.mousedown == false) {
					return;
				}
				//获取x和y
				var nx = e.clientX;
				var ny = e.clientY;
				//计算移动后的左偏移量和顶部的偏移量
				var nl = nx - (this.domPosition.x - this.domPosition.l);
				var nt = ny - (this.domPosition.y - this.domPosition.t);

				this.$refs['courseMealDialog'].style.left = nl + 'px';
				this.$refs['courseMealDialog'].style.top = nt + 'px';
			},
			headMouseUp(e){
				//获取x和y
				var nx = e.clientX;
				var ny = e.clientY;
				//计算移动后的左偏移量和顶部的偏移量
				var nl = nx - (this.domPosition.x - this.domPosition.l);
				var nt = ny - (this.domPosition.y - this.domPosition.t);

				this.$refs['courseMealDialog'].style.left = nl + 'px';
				this.$refs['courseMealDialog'].style.top = nt + 'px';

				//开关关闭
				this.mousedown = false;
				this.$refs['courseMealDialog'].style.cursor = 'default';
			},
			headMouseOut(e){
				// console.log('mouse out')
				//开关关闭
				this.mousedown = false;
				this.$refs['courseMealDialog'].style.cursor = 'default';
			},

			getSelectData(){
				let list=this.planObjectType==1?this.courseList:this.mealList;
				let idFieldName=this.planObjectType==1?'courseId':'mealsId';
				let temp='';
				let idList=[];
				list.forEach(ele=>{
					if(ele.checked){
						temp+=ele.name+',';
						idList.push(ele[idFieldName]);
					}
				});
				if(temp.length>0)temp=temp.substr(0,temp.length-1);
				
				return {planItemContent:temp,idList:idList,planObjectType:this.planObjectType};
			},
			save(){
				let data=this.getSelectData();
				this.$emit('save',data);
			},
			hidden(){
				this.$emit('hidden')
			}
		},
		mounted(){
			
		},
		computed:{
			
		},
		watch:{

		}
	}
</script>

<style lang="scss" scoped>
	.course-meal-dialog{
		position: fixed;
		z-index: 9999;
		width: 5rem;
		height: auto;
		top: 15vh;
		left: 50%;
		transform: translate(-50%,0);
		user-select: none;

		background-color: white;
		border: 0.01rem solid #ededed;
		border-radius: 0.1rem;
		padding: 0.3rem;
		padding-top: 0rem;
		color: #666666;

		.head{
			text-align: right;
			margin: 0;
			cursor: move;
			.closebtn{
				margin-right: -0.18rem;
				font-size: 0.2rem;
				line-height: 0.3rem;
			}
			.closebtn:hover{
				cursor: pointer;
				color: #409EFF;
			}
		}
		.bottom{
			padding-top: 0.1rem;
			text-align: center;
		}
	}
</style>
<style scoped src="@/style/module/table.css"></style>